<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<?php $this->need('header.php'); ?>
 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../../usr/themes/NewUI-Typecho/fontawe/css/brands.css">
		<link rel="stylesheet" href="../../usr/themes/NewUI-Typecho/fontawe/css/solid.css">
		<link rel="stylesheet" href="../../usr/themes/NewUI-Typecho/fontawe/css/fontawesome.css">
		<title><?php $this->options->title() ?></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
		/* ý����ѯ */
			@media (max-width:666px){
				
				.white{
					width: 350px;
					margin: 8px auto;
					text-align: center;
					opacity: 0.7;
				}
				.img,.title{
					width: 4.5em;
					overflow: hidden;
					margin: auto;
					text-align: center;
				}
				.power{
					/* right: 48px; */
				}
				.logo a{
				    width: 12em;
				    height: 1.5em;
				    overflow: hidden;
				}
				.menu{
				    width: 150px;
				    display: none;
				}
				.menu ul li{
					margin: 5px;
				}
				.menu ul li a{
					display: block;
				}
				.img,.title{
					display: block;
				}
				.content{
					border-bottom-left-radius: 18px;
					/* width: 75%; */
					/* display: block; */
					text-align: center;
					/*padding-right: 0px;*/
				}
				.content p img{
				    width: 100%;
				    height: auto;
				}
				.content{
					text-align: center;
					padding-right: 10px;
					/*padding: 5px;*/
				}
			    .content p{
			        text-align: center;
			        margin: auto;
		    	}
			}
			
			body{
				background-image: url(http://pic1.win4000.com/wallpaper/2018-01-22/5a65b33a40363.jpg);
				/* display: flex;
				align-items: center;
				height: 88vh; */
			}
			.box{
				height: 97vh;
				/* width: 98vw; */
				/* margin: 50px auto; */
				display: flex;
				/* justify-content: center; */
				align-items: center;
				/* height: 1920px; */
			}
			.box a p{
				color: #615C5C;
				transition: all 0.5s;
			}
			.box a p:hover{
				color: #ffffff;
				font-size: 12px;
				text-shadow: 0px 0px 1px #2b2b2b;
			}
			.white{
			    opacity: 0.9;
				/* width: 1200px; */
				/*width: 888px;*/
				/* min-width: 888px; */
				max-width: 1234px; 
				/*min-height: 520px;*/
				display: flex;
				justify-content: center;
				align-items: center;
				flex-wrap: wrap;
				margin: 0px auto;
				background-color: #3f3f3f;
				/* background-image: url(image/bg.png);
				background-repeat: no-repeat;
				background-position: top; */
				box-shadow: 0px 0px 20px #959595;
				background-size: 100% 80%;
				/* padding: 50px; */
				border-radius: 18px;
				position: relative;
			}
			.head{
				height: 0px;
				width: 100vw;
				background-color: aliceblue;
			}
			.head .icon{
				margin: 0px;
			}
			.head .icon{
				position: absolute;
				top:10px;
				left: 12px;
			}
			.icon a{
				margin: 1.5px;
				text-decoration: none;
				color: #ff557f;
				transition: all 0.5s;
			}
			.icon a:hover{
				color: #00aaff;
			}
			.icon .red{
				color: #ff5500;
			}
			.icon .yellow{
				color: #ffd630;
			}
			.icon .green{
				color: #00d89b;
			}
			.logo a{
				position: absolute;
				top:12px;
				text-align: center;
				left: 30vw;
			}
			.logo a{
				font-size: 10px;
				font-weight: 300;
				color: #989091;
				cursor: help;
				text-decoration: none;
				transition: all 0.5s;
			}
			.logo a:hover{
				color: #ff557f;
				text-shadow: 45vh 30vw 1px #aaaa7f;
			}
			.power{
				margin: 0px;
				margin-top: 11px;
				position: absolute;
				/* font-size: 12px; */
				font-weight: 300;
				color: #909090;
				top:0px;
				right: 10px;
			}
			.power a{
				text-decoration: none;
				color: #B5B5B5;
				padding: 3px;
				transition: all 0.4s;
			}
			.power a:hover{
				color: #555500;
			}
			.menu{
				flex:1;
				min-height: 600px;
				margin-top: 45px;
				border-bottom-left-radius: 18px;
				background-color: #eaeaea;
			}
			.menu ul {
				padding: 0px 15px;
			}
			.menu ul li{
				list-style: none;
				margin: 3px 10px;
			}
			.menu ul li a img{
				width: 25px;
			}
			.content{
				padding: 10px 0px;
				flex:5;
				display: flex;
				flex-wrap: wrap;
				/* align-items: flex-start; */
				/* justify-content: flex-start; */
				height: 580px;
				margin-top: 45px;
				overflow: auto;
				border-bottom-right-radius: 18px;
				background-color: #fcfcfc;
			}
			.menu ul li a{
				text-decoration: none;
				display: flex;
				/* justify-content: center; */
			}
			.title{
				margin-left: 5px;
				margin-top: 2px;
				overflow: hidden;
				width: 8em;
				/* text-decoration: none; */
				color:#555500;
			}
			.title p{
				font-size: 14px;
				margin: 0px;
			}
			
			.content .app{
				padding: 5px;
				width: 88px;
				height: 77px;
				max-height: 95px;
				text-align: center;
				transition: all 0.4s;
			}
			.content .app:hover{
				border-radius: 8px;
				border: 1px dashed #ffffff;
			}
			/* .content .logo{
				display: block;
				position: absolute;
			} */
			.content .app a{
				text-decoration: none;
				color: #615c5c;
				font-size: 14px;
			}
			.content .app p{
				margin: 3px;
				width: 88px;
				height: 32px;
				overflow: hidden;
				color: #615C5C;
			}
			.content .app img{
				width: 52px;
				/* max-width: 64px; */
				/* width: 64px; */
				transition: all 0.8s;
			}
			.app img:hover{
				transform:rotate(16deg);
			}
			.content{
					text-align: center;
					padding-right: 0px;
				}
			.content p{
			    text-align: center;
			    margin: auto;
			}
			.content p img{
				    width: 100%;
				    height: auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="white">
				<div class="head">
					<p class="icon">
						<a href="#" class="red"><i class="fas fa-circle"></i></a>
						<a href="#" class="yellow"><i class="fas fa-circle"></i></a>
						<a href="#" class="green"><i class="fas fa-circle"></i></a>
					</p>
					<h1 class="logo"><a href="#" target="_blank">Qian ICP20005828-10 BugBank</a></h1>
					<p class="power">
						<a href="#"><i class="fas fa-window-minimize"></i></a>
						<a href="#"><i class="fas fa-window-restore"></i></a>
						<a href="/"><i class="fas fa-window-close"></i></a>
					</p>
				</div>
				<div class="menu">
					<ul>
						<?php $this->widget('Widget_Metas_Category_List')->to($category); ?>
						<?php while ($category->next()): ?>
							<li>
								<a href="<?php $category->permalink(); ?>">
									<div class="img">
										<img src="<?php $this->options->themeUrl(); ?>image/xinwen.png" alt="icon">
									</div>
									<div class="title">
										<p><?php $category->name(); ?></p>
									</div>
								</a>
							</li>
						<?php endwhile; ?>	
					</ul>
				</div>
				<div class="content">
					<?php $this->content(); ?>
				</div>
			</div>
		</div>
	</body>
</html>
<?php $this->need('footer.php'); ?>
